<template>
  <div class="app-container" v-loading="listLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <!-- main -->
    <div class="main-container">
      <!-- 查询条件 -->
      <div class="header-box">
        <div class="search-box">
          <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="mini">
            <!-- <el-form-item>
              <el-input v-model="queryParams.kz_name" clearable placeholder="客资名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="queryParams.kz_phone" clearable placeholder="客资电话"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryParams.store_id" clearable @change="storeChange" style="width: 130px;" placeholder="选择门店">
                <el-option :label="item.store_name" :value="item.store_id" v-for="item in storeList"
                  :key="item.store_id"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-select v-model="queryParams.datetimelable">
                <i slot="prefix" class="el-input__icon el-icon-timer" />
                <el-option label="录入时间" value="0"></el-option>
                <el-option label="最后操作时间" value="8"></el-option>
                <!-- <el-option label="领取时间" value="1"></el-option>
                <el-option label="首次预约时间" value="2"></el-option>
                <el-option label="最后预约时间" value="3"></el-option>
                <el-option label="首次到店时间" value="4"></el-option>
                <el-option label="最后到店时间" value="5"></el-option>
                <el-option label="订单时间" value="6"></el-option>
                <el-option label="追踪时间" value="7"></el-option>
                <el-option label="婚期时间" value="9"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker value-format="yyyy-MM-dd" clearable start-placeholder="开始日期" end-placeholder="结束日期"
                v-model="queryParams.date" type="daterange" placeholder="请选择日期" @change="dateChange">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryParams.source_channel" clearable placeholder="客资来源">
                <el-option label="美团" value="美团"></el-option>
                <el-option label="小红书" value="小红书"></el-option>
                <el-option label="抖音" value="抖音"></el-option>
                <el-option label="微博" value="微博"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item>
              <el-cascader :options="options" :props="props" collapse-tags clearable placeholder="分组员工"></el-cascader>
            </el-form-item> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryData" icon="el-icon-search">检索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 操作按钮 -->
        <div class="operate-box">
          <el-button type="primary" @click="showAddModal" size="mini" icon="el-icon-circle-plus" plain>录入客资</el-button>
        </div>
      </div>
      <!-- table -->
      <div class="table-box">
        <vxe-table
          border
          ref="xTable1"
          max-height="620"
          show-overflow
          size="mini"
          :row-config="{isHover: true}"
          :data="datalist"
          @cell-click="handleCurrentChange"
          @filter-visible="filterVisibleEvent"
          @filter-change="filterChangeEvent">
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <!-- <vxe-column field="index" title="ID" width="60"></vxe-column> -->
          <vxe-column field="kz_name" title="姓名" width="80"></vxe-column>
          <vxe-column field="kz_gender" title="性别" width="80"></vxe-column>
          <vxe-column field="wedding_date" title="婚期" width="100"></vxe-column>
          <vxe-column field="type_name" title="类型" width="80"></vxe-column>
          <vxe-column field="source_channel" title="渠道" width="150"></vxe-column>
          <vxe-column field="sub_kz_status_name" :filters="[]" :filter-method="filterNameMethod" title="状态" width="100"></vxe-column>
          <vxe-column field="create_time" title="创建时间" width="150"></vxe-column>
          <vxe-column field="kz_phone" title="手机" width="100"></vxe-column>
          <vxe-column field="wx_id" title="微信" width="100"></vxe-column>
          <vxe-column field="intention_level" title="意向度" width="100"></vxe-column>
          <vxe-column field="budget" title="预算" width="70"></vxe-column>
          <vxe-column field="promoter" title="邀约组" width="100"></vxe-column>
          <vxe-column field="operator_sales" title="邀约员工" width="100"></vxe-column>
          <vxe-column field="store_name" title="所属门店" width="100"></vxe-column>
          <vxe-column field="price" title="套系价格" width="100"></vxe-column>
          <vxe-column field="amount_paid" title="已付价格" width="100"></vxe-column>
        </vxe-table>
      </div>
      <pagination v-show="total > 0" :total="total" :page="queryParams.pageIndex" :limit="queryParams.pageSize" @pagination="queryData" />
    </div>
    <!-- 录入客资弹框 -->
    <el-drawer z-index="1000" title="推广录入" direction="rtl" custom-class="kz-drawer" size="40%" :visible.sync="addModal">
       <template slot="title">
        <Tabs @on-click="handleTabClick">
            <TabPane label="电商" icon="ivu-icon ivu-icon-ios-globe-outline"></TabPane>
            <TabPane label="转介绍" icon="ivu-icon ivu-icon-md-repeat"></TabPane>
            <TabPane label="门店" icon="ivu-icon ivu-icon-md-home"></TabPane>
            <TabPane label="批量创建" icon="ivu-icon ivu-icon-logo-buffer"></TabPane>
        </Tabs>
      </template>
      <div class="CM_DRAWER_BODY ps">
        <el-form :inline="true" size="mini" ref="addFormRef" :model="addForm" :rules="addFormRules"
          class="demo-form-inline">
          <el-form-item label="姓名:" v-show="tabname != 3">
            <el-input v-model="addForm.kz_name" style="width: 130px" maxlength="4" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别:" prop="kz_gender" v-show="tabname != 3">
            <el-select v-model="addForm.kz_gender" style="width: 130px;" placeholder="请选择">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机:" prop="kz_phone" v-show="tabname != 3" required>
            <el-input v-model="addForm.kz_phone" style="width: 130px" maxlength="11" placeholder="请输入手机"></el-input>
          </el-form-item>
          <el-form-item label="微信:" prop="wx_id" v-show="tabname != 3" required>
            <el-input v-model="addForm.wx_id" style="width: 130px" placeholder="请输入微信"></el-input>
          </el-form-item>
          <el-form-item label="类型:" prop="type_name">
            <el-select v-model="addForm.type_id" @change="typeChange" style="width: 130px;" placeholder="拍摄类型">
              <el-option :label="item.type_name" :value="item.type_id" v-for="item in typeList"
                :key="item.type_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源:" v-show="tabname == 3">
            <el-select v-model="addForm.laiyuan" style="width: 130px;" placeholder="请选择">
              <el-option label="电商" value="电商"></el-option>
              <el-option label="转介绍" value="转介绍"></el-option>
              <el-option label="门店" value="门店"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="渠道:" prop="source_channel" required>
            <el-cascader @change="handleChannelChange" :options="subChannelList" :props="subChannelProps" style="width: 130px;" placeholder="请选择"></el-cascader>
          </el-form-item>
          <el-form-item label="意向度:" v-show="tabname != 3">
            <el-select v-model="addForm.intention_level" style="width: 120px;" placeholder="请选择">
              <el-option label="A (3-6个月)" value="A (3-6个月)"></el-option>
              <el-option label="B (一年内)" value="B (一年内)"></el-option>
              <el-option label="C (两年内)" value="C (两年内)"></el-option>
              <el-option label="D (潜在客户)" value="D (潜在客户)"></el-option>
              <el-option label="E" value="E"></el-option>
              <el-option label="F" value="F"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预算:" v-show="tabname != 3">
            <el-select v-model="addForm.budget" style="width: 130px;" placeholder="请选择">
              <el-option label="2k以下" value="2k以下"></el-option>
              <el-option label="2k-4k" value="2k-4k"></el-option>
              <el-option label="4k-6k" value="4k-6k"></el-option>
              <el-option label="6k-8k" value="6k-8k"></el-option>
              <el-option label="8k-10k" value="8k-10k"></el-option>
              <el-option label="10k以上" value="10k以上"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="婚期:" v-show="tabname != 3">
            <el-date-picker value-format="yyyy-MM-dd" v-model="addForm.wedding_date" style="width: 130px;" type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="推荐员工:" v-show="tabname == 1">
            <el-select v-model="addForm.recommended_employee" @change="operatorSalesChange" style="width: 107px;"
              placeholder="请选择">
              <el-option :label="item.employee_name" :value="item.employee_id" v-for="item in operatorSalesList"
                :key="item.employee_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省市区" v-show="tabname != 3">
            <Cascader :data="options4" style="width: 120px" @on-change="handleAreaChange" />
          </el-form-item>
          <el-form-item label="详细地址:" v-show="tabname != 3">
            <el-input v-model="addForm.detailed_address" style="width: 107px" placeholder="详细地址"></el-input>
          </el-form-item>
          <el-form-item label="爱人姓名:" >
            <el-input v-model="addForm.spouse_name" style="width: 107px" placeholder="爱人姓名"></el-input>
          </el-form-item>
          <el-form-item label="爱人手机:" prop="spouse_phone">
            <el-input v-model="addForm.spouse_phone" style="width: 107px" placeholder="爱人手机"></el-input>
          </el-form-item>
          <el-form-item label="爱人微信:">
            <el-input v-model="addForm.spouse_wx" style="width: 106px" placeholder="爱人微信"></el-input>
          </el-form-item>
          <el-form-item label="老客户:">
            <el-input v-model="addForm.existing_customer" style="width: 120px" placeholder="老客户姓名"></el-input>
          </el-form-item>
          <el-form-item label="所属门店:">
            <el-select v-model="addForm.store_id" clearable @change="storeChange" style="width: 107px;" placeholder="选择门店">
              <el-option :label="item.store_name" :value="item.store_id" v-for="item in storeList" :key="item.store_id"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="生日:">
            <el-date-picker value-format="yyyy-MM-dd" v-model="addForm.birthday" style="width: 130px;" type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item> -->
          <el-form-item label="深挖员工:">
            <el-input v-model="addForm.recommended_employee" style="width: 106px" placeholder="深挖员工"></el-input>
          </el-form-item>
          <el-form-item label="是否到店:">
            <el-input v-model="addForm.go_store" style="width: 106px" placeholder="是否到店"></el-input>
          </el-form-item>
          <el-form-item label="拍照时间:">
            <el-date-picker value-format="yyyy-MM-dd HH:mm" v-model="addForm.planned_shooting_time"  type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="核销:">
            <el-select v-model="addForm.redeem" style="width: 130px;" placeholder="请选择">
              <el-option label="美团核销" value="美团核销"></el-option>
              <el-option label="婚礼纪核销" value="婚礼纪核销"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="补款时间:">
            <el-date-picker value-format="yyyy-MM-dd hh:mm" v-model="addForm.top_up_time" type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="补款金额:">
            <el-input v-model="addForm.invalid_note" style="width: 106px" placeholder="补款金额"></el-input>
          </el-form-item>
          <el-form-item label="电商分配:" v-show="tabname == 0">
            <!-- <el-cascader :options="dsfpOptions" v-model="addForm.e_commerce_allocation" clearable></el-cascader> -->
            <el-select v-model="addForm.e_commerce_allocation" style="width: 106px;" placeholder="请选择">
              <el-option label="周波" value="周波"></el-option>
              <el-option label="刘启超" value="刘启超"></el-option>
              <el-option label="高智达" value="高智达"></el-option>
              <el-option label="傅志强" value="傅志强"></el-option>
            </el-select>
          </el-form-item>
          <el-row v-show="tabname == 0">
              <el-alert title="当前分配规则：电商分配 (手动分配)" :closable="false" type="success"></el-alert>
          </el-row>
          <el-row style="margin-top: 20px;" v-show="tabname != 3">
            <div class="remarksitem">
              <el-form-item style="width: 100%;">
                <el-input style="width: 100%;" :autosize="{ minRows: 8, maxRows: 8}" type="textarea" v-model="addForm.kz_remarks" placeholder="备注"></el-input>
              </el-form-item>
            </div>
          </el-row>
          <el-row style="margin-top: 20px;" v-show="tabname == 3">
            <div class="remarksitem">
              <el-form-item style="width: 100%;">
                <el-input style="width: 100%;" :autosize="{ minRows: 8, maxRows: 8}" type="textarea" v-model="addForm.kz_remarks" placeholder="姓名-手机号-微信-QQ-备注"></el-input>
              </el-form-item>
            </div>
          </el-row>
          <el-row v-show="tabname == 3">
              <div class="plcj-intrduce">
                <p>批量创建说明：</p>
                <p>一行为一个客资，每个客资信息用 - 隔开，如果其中一个信息不填可直接留空</p>
                <p> 批量创建客资格式：</p>
                <p>・姓名-手机号-微信-QQ-备注</p>
                <p>・姓名-手机号-微信-QQ-备注</p>
                <p>・姓名-手机号-微信-QQ-备注</p>
              </div>
          </el-row>
          <el-row style="margin-top: 20px;" v-show="tabname != 3">
            <div class="imgremark">
              <el-form-item style="width: 100%;" label="图片备注">
                <el-upload
                  action="11"
                  :http-request="kzRemarksUpload"
                  :limit="1"
                  :file-list="attach_list"
                  list-type="picture-card"
                  compress="false"
                  :on-exceed="handlePictureCardExceed"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  >
                  <i class="el-icon-camera"></i>
                </el-upload>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <div class="demo-drawer__footer">
        <el-button @click="addModal = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-drawer>
    <el-dialog top="2vh" custom-class="preview-dialog" title="图片预览" :visible.sync="imgDialogVisible" width="80%">
      <img  class="imagePreview" :src="addForm.image_note" alt="">
    </el-dialog>
    <!-- 编辑客资 -->
    <Modal v-model="showKzModal" draggable scrollable :mask="false" class-name="kz-dialog" title="">
      <kzOrder name="kezi" @closeTk="handleCloseTk" @queryALlKzkzOrder="handlequeryALlKzkezi"></kzOrder>
    </Modal>
    <!-- 编辑客资 -->
    <!-- <el-dialog :modal-append-to-body="false" z-index="1000" width="50%" top="8vh" style="" custom-class="kz-dialog" :visible.sync="editModal">
      <kzOrder name="kezi" @closeTk="handleCloseTk" @queryALlKzkzOrder="handlequeryALlKzkezi"></kzOrder>
    </el-dialog> -->
  </div>
</template>

<script>
  import axios from "axios";
  // 引入城市数据
  import {
    provinceAndCityData,
    provinceAndCityDataPlus,
    regionData,
    regionDataPlus,
    CodeToText,
    TextToCode,
  } from "@/components/RegionPicker";
  import kzOrder from '@/components/kzOrder/index.vue'
  import {
    getAllKz,
    deleteKz,
    getKz,
    addKz,
    getViewHistory,
    getAllKzStatus,
    addOperationLog,
    getChannel,
    upload_image
  } from "@/api/kz/index";
  import {
    getAllstore,
    getAllType,
  } from "@/api/order/index";
  import {
    getEmployee
  } from '@/api/common.js'
  import { formatDate } from "@/utils/index";
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { Switch } from "view-design";
  export default {
    components: {
      quillEditor,
      kzOrder
    },
    props: {
      datalist: {
        type: Array,
        default: []
      },
      listLoading: {
        type: Boolean,
        default: false
      },
      sta_id: {
        type: String,
        default: ''
      },
      total: {
        type: Number,
        default: 0
      }
    },
    watch: {
      sta_id(newValue, oldValue) {
        console.log(newValue);
        this.queryParams.pageIndex = 1
        this.queryParams.pageSize = 10
        const staList = []
        this.kzStatusList.forEach(item => {
          let map = {}
          if (item.kz_status_id == newValue) {
            map.label = item.sub_kz_status_name
            map.value = item.sub_kz_status_name
            map.checked = true
          } else {
            map.label = item.sub_kz_status_name
            map.value = item.sub_kz_status_name
          }
          staList.push(map)
        })

        // 异步加载筛选数据
        setTimeout(() => {
          const $table = this.$refs.xTable1
          if ($table) {
            const nameColumn = $table.getColumnByField('sub_kz_status_name')
            if (nameColumn) {
              $table.setFilter(nameColumn, staList)
            }
          }
        }, 500)
      }
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          if (this.addForm.checkPass !== '') {
            this.$refs.addFormRef.validateField('checkPass');
          }
          callback();
        }
      };
      var validateWx = (rule, value, callback) => {
        if (value === "") {
          callback(new Error('请输入微信'));
        } else {
          callback();
        }
      };
      return {
        loading: false,
        imgDialogVisible: false,
        attach_list: [],
        dsfpOptions: [
          {
            value: 'xiaoshou1',
            label: '销售1组',
            children: [
              { value: '心心',label: '心心' },
              { value: '澜熙',label: '澜熙' },
              { value: '美金',label: '美金' },
              { value: '邵昇',label: '邵昇' },
              { value: '阿琛',label: '阿琛' },
              { value: '林心茹',label: '林心茹' }
            ]
          },
          {
            value: 'xiaoshou2',
            label: '销售2组',
            children: [
              { value: 'kitty',label: 'kitty' },
              { value: '梁航',label: '梁航' },
              { value: '华英',label: '华英' },
              { value: '郝安琪',label: '郝安琪' },
              { value: '刘冰亚',label: '刘冰亚' }
            ]
          }
        ],
        activeName: 'first',
        searchData: '',
        rowData: {},
        options4: regionDataPlus,
        addModal: false,
        showKzModal: false,
        queryParams: {
          kz_name: '',
          kz_phone: '',
          store_id: '',
          datetimelable: '0',
          // date: '',
          source_channel: [],
          creation_time_start: '',
          creation_time_end: '',
          update_time_start: '',
          update_time_end: '',
          pageIndex: 1,
          pageSize: 10
        },
        addForm: {
          sub_kz_status_id: '', // 客资子状态id
          sub_kz_status_name: '', // 客资子状态name
          kz_name: '', // 姓名
          kz_phone: '', // 电话
          wx_id: '', // 微信
          type_id: '', // 类型id
          type_name: '', // 类型名称
          store_id: '', // 门店id
          store_name: '', // 门店名称
          kz_remarks: '', // 备注
          source_channel: [], // 渠道
          recommended_employee: '', // 网销id
          operator_sales: '', // 网销
          promoter_id: '', // 推广id
          promoter: '', // 推广
          intention_level: '', // 意向等级
          ad_id: '', // 广告id
          ad_addr: '', // 广告地址
          planned_shooting_time: '', // 拍照时间
          top_up_time: '', // 补款时间
          top_up_amount: '', // 补款金额
          redeem: '', // 核销
          wedding_date: '', // 婚礼时间
          budget: '', // 预算
          key_words: '', // 关键字
          kz_gender: '', // 客资性别,
          comm_method: '', // 咨询方式
          kz_addr: '', // 地址
          detailed_address: '', // 详细地址
          existing_customer: '', // 老客户
          select_branch: '', // 所属门店
          recommended_employee: '', // 深挖员工
          go_store: '', // 是否到店
          existing_customer_wedding_date: '', // 老客户婚期
          birthday: '', // 生日
          referrer: '', // 介绍人
          invite_status: '', // 邀约状态
          price: '', // 套系价格
          amount_paid: '', // 已付价格
          invalid_note: '', // 无效备注
          e_commerce_allocation: '', // 电商分配
          image_note: '', // 图片备注
          tracking_note: '', // 跟踪备注
          track_time: '', // 追踪时间
          invite_time: '', // 邀约时间
          time_to_store: '', // 进店时间
        },
        storeList: [], // 门店列表
        typeList: [], // 类型列表
        operatorSalesList: [], // 网销列表
        promoterList: [], // 推广列表
        // 表单校验
        addFormRules: {
          kz_phone: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          wx_id: [{
            validator: validateWx,
            trigger: 'blur'
          }],
          source_channel: [{ message: '请选择渠道', trigger: 'blur' } ],
          kz_gender: [{ message: '请选择性别', trigger: 'blur' } ]
        },
        // 表格多选和单选
        selectRows: [],
        selectRow: {},
        // 表格列数据
        props: {
          multiple: true
        },
        options: [{
            value: 1,
            label: '电商客服组',
            children: [{
              value: 2,
              label: '小心',
            }, {
              value: 7,
              label: '蕾蕾',
            }, {
              value: 12,
              label: '燕燕',
            }]
          },
          {
            value: 17,
            label: '客服测试',
            children: [{
              value: 18,
              label: '客服1',
            }, {
              value: 21,
              label: '客服2',
            }]
          }
        ],
        employee_id: '1',
        vhList: '',  // 客资浏览记录
        closeShow: false, // 浏览记录左边客资右边的关闭按钮是否显示
        editorOption: {
          modules: {
            toolbar: {
              container: ['bold', 'italic', 'underline', 'strike'],
              handlers: {
                image: this.handleImgUpload
              }
            }
          },
          placeholder: '请输入正文'
        },
        kzStatusList: [],
        tabname: 0,
        channelList: [],
        subChannelList: [],
        subChannelProps: {
          value: "name",
          label: "name",
          children: "sub_channel",
        },
        select_branchList: [
          {label:'茂名店',value:'茂名店'},
          {label:'化州店',value:'化州店'},
          {label:'廉江店',value:'廉江店'},
          {label:'吴川店',value:'吴川店'},
          {label:'高州店',value:'高州店'},
          {label:'薇薇新娘',value:'薇薇新娘'},
          {label:'写真馆',value:'写真馆'},
          {label:'未知门店',value:'未知门店'},
          {label:'森岚礼服馆',value:'森岚礼服馆'}
        ]
      }
    },
    mounted() {
      this.getStore()
      this.getTypes()
      this.getCateEmployee(9)
      this.getCateEmployee(10)
      this.getAllStatus()
    },
    methods: {
      filterVisibleEvent ({ column, visible }) {
        console.log(`${column.property} ${visible ? '打开' : '关闭'}筛选面板`)
      },
      filterChangeEvent ({ column }) {
        console.log(`${column.property} 筛选了数据`)
      },
      filterNameMethod ({ value, row, column }) {
        return row.sub_kz_status_name  == value
      },
      filterAgeMethod ({ option, row }) {
        return row.age === Number(option.data)
      },
      // 筛选条件变化
      handleFilterChange(column, data) {
        // 处理筛选条件变化的逻辑
        console.log(column._filterChecked);
        const allOptions = column.filters.map(option => option.value);
        // 将所有选项值添加到 filteredValue 中
        column.filteredValue = allOptions;
      },
      // 根据条件查询
      queryData(data) {
        if (data) {
          this.queryParams.pageIndex = data.page
          this.queryParams.pageSize = data.limit
        }
        this.$emit('queryDatalist', this.queryParams)
      },
      // 获取所有状态
      getAllStatus() {
        getAllKzStatus()
          .then((res) => {
            console.log('获取所有客资状态', res);
            if (res.rstpCode === '0000') {
              this.kzStatusList = res.data;
              const staList = []
              this.kzStatusList.forEach(item => {
                let map = {}
                map.label = item.sub_kz_status_name
                map.value = item.sub_kz_status_name
                staList.push(map)
              })
              // 异步加载筛选数据
              setTimeout(() => {
                const $table = this.$refs.xTable1
                if ($table) {
                  const nameColumn = $table.getColumnByField('sub_kz_status_name')
                  if (nameColumn) {
                    $table.setFilter(nameColumn, staList)
                  }
                }
              }, 500)
              this.$store.commit('layout/app/setKzState', res.data)
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
      },
      // 获取所有店铺列表
      getStore() {
        getAllstore().then(res => {
          console.log('获取所有店铺列表', res);
          if (res.rstpCode === '0000') {
            this.storeList = res.data;
            this.addForm.store_id = this.storeList[0].store_id
            this.addForm.store_name = this.storeList[0].store_name
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 得到所有的拍摄类型
      getTypes() {
        getAllType().then(res => {
          console.log('得到所有的拍摄类型', res);
          if (res.rstpCode === '0000') {
            this.typeList = res.data;
            this.$store.commit('layout/app/setTypeList', res.data)
            this.addForm.type_id = this.typeList[0].type_id
            this.addForm.type_name = this.typeList[0].type_name
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 根据条件检索员工信息
      getCateEmployee(roleid) {
        getEmployee({
          role: roleid
        }).then(res => {
          console.log('根据条件检索员工信息', res);
          if (res.rstpCode === '0000') {
            if (roleid == 9) {
              this.operatorSalesList = res.data;
            } else if (roleid == 10) {
              this.promoterList = res.data;
            }
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 选择门店事件
      storeChange(e) {
        this.addForm.store_name = this.storeList.find(item => item.store_id == e).store_name
        this.rowData.store_name = this.storeList.find(item => item.store_id == e).store_name
      },
      // 选择拍摄类型事件
      typeChange(e) {
        this.addForm.type_name = this.typeList.find(item => item.type_id == e).type_name
        this.rowData.type_name = this.typeList.find(item => item.type_id == e).type_name
      },
      // 选择网销事件
      operatorSalesChange(e) {
        this.addForm.operator_sales = this.operatorSalesList.find(item => item.employee_id == e).employee_name
      },
      // 选择推广事件
      promoterChange(e) {
        this.addForm.promoter = this.promoterList.find(item => item.employee_id == e).employee_name
        this.rowData.promoter = this.promoterList.find(item => item.employee_id == e).employee_name
      },
      handleAreaChange(value) {
        console.log("选择的code数据：", value);
        this.addForm.kz_addr = value[0] + ',' + value[1] + ',' + value[2]
        // this.addForm.kz_addr = Array.from(value).join(',')
      },
      showAddModal() {
        this.addModal = true
        this.getChannelMeth()
      },
      // 获取所有渠道
      getChannelMeth() {
        getChannel().then(res => {
          console.log('获取所有渠道', res);
          if (res.rstpCode === '0000') {
            this.channelList = res.data
            this.subChannelList = res.data[0].sub_channel
          } else {
            this.$Message.error({
              message: res.rstpMsg,
              customClass: 'myMessageClass'
            });
          }
        })
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 0) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
      },
      // 查询条件处理
      dateChange(value) {
        if (value) {
          if (this.queryParams.datetimelable == 0) {
            this.queryParams.creation_time_start = value[0]
            this.queryParams.creation_time_end = value[1]
          } else if (this.queryParams.datetimelable == 8) {
            this.queryParams.update_time_start = value[0]
            this.queryParams.update_time_end = value[1]
          }
        } else {
          this.queryParams.creation_time_start = ''
          this.queryParams.creation_time_end = ''
          this.queryParams.update_time_start = ''
          this.queryParams.update_time_end = ''
        }
      },
      // 添加客资
      handleAdd() {
        this.$refs.addFormRef.validate((valid) => {
          if (valid) {
            if (this.addForm.e_commerce_allocation === "") {
              this.addForm.sub_kz_status_id = '4'
            } else {
              this.addForm.sub_kz_status_id = '3'
            }
            addKz(this.addForm).then((res) => {
              console.log('添加客资', res);
              if (res.rstpCode === '0000') {
                this.$refs.addFormRef.resetFields()
                this.$Message.success("添加成功");
                // this.$emit('queryALlKzindex')
                this.queryData()
                this.addModal = false;
                const content = `【客资】【客资录入】在网页端通过：${this.addForm.source_channel}渠道录入客资
                    <p> ${this.addForm.promoter}@${formatDate(new Date(), 'yyyy/MM/dd HH:mm')}</p>`
                this.addOperaLog(res.data[0].kz_id,content, '1')
              } else {
                this.$Message.error({
                  message: res.rstpMsg,
                  customClass: 'myMessageClass'
                });
              }
            });
          }
        });
      },
      // 添加客资操作记录
      addOperaLog(kz_id,content,type) {
        addOperationLog({
          kz_id: kz_id,
          employee_id: this.employee_id,
          operation_content: content,
          operation_type: type
        }).then(res => {
          console.log('添加客资操作记录', res);
        })
      },
      handleChannelChange(val) {
        console.log(val);
        this.addForm.source_channel = val[0] + '/' + val[1]
        console.log(this.addForm.source_channel);
      },
      handlequeryALlKzkezi() {
        // this.$emit('queryALlKzindex')
        this.queryData()
      },
      // 查询浏览记录
      getVhList() {
        getViewHistory({
          employee_id: this.employee_id
        }).then(res => {
          console.log('获取某个用户的浏览客资记录', res);
          if (res.rstpCode === '0000') {
            this.vhList = res.data
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 富文本内容改变事件
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        // this.content = html
      },
      // 关闭行内编辑
      handleCancelEditLine(row, index) {
        this.datalist[index].editable = false;
        this.$set(row, "editable", false);
      },
      /**
       * 删除
       */
      handleDelete(row) {
        this.$Modal.confirm({
          title: "提示",
          content: "确定删除该条数据吗？",
          closable: true,
          onOk: () => {
            deleteKz({
              kz_id: row.kz_id
            }).then((res) => {
              console.log('删除客资', res);
              if (res.rstpCode === '0000') {
                this.$Message.success("删除成功");
                // this.$emit('queryALlKzindex')
                this.queryData()
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
      },
      // 选中表格中的某一行
      handleCurrentChange({row}) {
        console.log(row);
        this.$store.dispatch("layout/app/bcRowData", row);
        this.showKzModal = true
        // this.rowData = row
      },
      // 关闭编辑客资弹框
      handleCloseTk() {
        this.showKzModal = false
      },
      // 上传客资备注图片
      kzRemarksUpload(file) {
        console.log(file);
        const isLt2M = file.file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
        	this.loading = false;
        	this.$message.error("上传图片大小不能超过 2MB!");
        	return false;
        }
        const formData = new FormData();
        formData.append("image", file.file);
        upload_image(formData).then(res => {
          console.log('上传图片', res);
          if (res.rstpCode === '0000') {
            this.addForm.image_note = process.env.VUE_APP_BASE_SERVE + res.data[0].url
          }
        })
      },
      handlePictureCardExceed(files, fileList) {
         this.$Message.error('最多上传一张图片');
      },
      handlePictureCardPreview(file) {
        this.imgDialogVisible = true
      },
      handleRemove(file, fileList) {
        this.addForm.image_note = ''
      },
      // 处理新增客资弹框切换tab
      handleTabClick(name) {
        console.log(name);
        this.tabname = name
        this.subChannelList = this.channelList[name].sub_channel
      }
    }
  }
</script>

<style scoped lang="less">
  /* .table-box {
    max-height: 620px;
    overflow: auto;
  } */
  .operate-box {
    // margin-bottom: 0.3rem;
  }
  .head-list {
    display: flex;
    align-content: center;
    padding-top: 20px;
    color: #222;
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: 20px;
    .head-box {
      flex-shrink: 0;
      box-sizing: border-box;
      border-left: 1px solid #d9d9d9;
      border-top: 1px solid #d9d9d9;
      padding: 0 20px;
      cursor: pointer;
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      transition: all .3s;
      &:first-child {
        border-top-left-radius: 4px;
      }
      &:last-child{
        border-top-right-radius: 4px;
        border-right: 1px solid #d9d9d9;
      }
    }
    .active {
      color: #fff;
      background-color: #2f88ff;
    }
  }
  .editcontainer {
    display: flex;
    height: 30rem;
    .left-container {
      width: 20%;
      border-right-width: 1px;
      border-right-color: #f5f5f5;
      border-right-style: solid
    }
  }

  .demo-drawer__footer {
    display: flex;
    justify-content: center;
    margin-top: 1%;
  }

  .el-table {
    .warning-row {
      background: oldlace !important;
    }

    .success-row {
      background: #f0f9eb !important;
    }
  }
  .plcj-intrduce {
    position: relative;
    padding: 8px 48px 8px 16px;
    border-radius: 4px;
    color: #415058;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 10px;
    border: 1px solid #7aceff;
    background-color: #e6f7ff;
  }
</style>
